<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">
					产品详情
				</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
					<view class="backImg-right">
						<image @tap="collectionChange(1)" v-if="!isCollection" src="../../static/common/collection.png" mode=""></image>
						<image @tap="collectionChange(2)" v-else src="../../static/common/collection_active.png" mode=""></image>
						
						<image @tap="shareFx" class="share" src="../../static/common/share.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-navbar>
		
		<view class="goods-image">
			<view v-if="setImgShow(itemDetails) == 1">
				<image class="img" :src="itemDetails.coverImg" mode="scaleToFill">
				</image>
			</view>
			<view v-else-if="setImgShow(itemDetails) == 2">
				<video class="videoBox" :enable-progress-gesture="false" :src="itemDetails.coverImg" muted
					:autoplay="false" :controls="false" loop></video>
			</view>
			<view v-else-if="setImgShow(itemDetails) == 3">
				<view class="mask"></view>
				<iframe class="iframeBox" :src="`/hybrid/html/3d.html?modelUrl=${itemDetails.coverImg}`"></iframe>
				<image @tap="model3dShow = true;stop()" class="model3d" src="../../static/detail/model3d.png" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="goods-desc">
			<view class="goods_details">
				<view class="title">
					<view>{{itemDetails.seriesName}}</view>
					<!-- <view class="num">限量<text class="text">{{itemDetails.castingAmount?itemDetails.castingAmount:"1"}}份</text></view> -->
					<view v-for="(cur,ind) in itemDetails.labelList" :key="ind">{{cur}}</view>
				</view>
				<view class="name">
					<text class="castNameS">{{itemDetails.metafile.name}}</text>
					<view>
						<image v-if="setImgShow(itemDetails) == 1" src="@/static/home/fileType1.png" mode="widthFix"></image>
						<image v-if="setImgShow(itemDetails) == 2" src="@/static/home/fileType2.png" mode="widthFix"></image>
						<image v-if="setImgShow(itemDetails) == 3" src="@/static/home/fileType3.png" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="itemCont">
					<view>发售方式</view><text>{{itemDetails.bsType == 0?"抢购":"空投"}}，每人最多购买{{itemDetails.quotaNumber}}份</text>
				</view>
				<view class="itemCont">
					<view>首发时间</view><text>{{moment(itemDetails.startDate).format('MM月DD日HH:mm至')+moment(itemDetails.endDate).format('MM月DD日HH:mm')}}</text>
				</view>
			</view>
			
			<view class="infoBox">
				<view><view>发售数量<text>{{itemDetails.castingAmount || 0}}份</text></view></view>
				<view @tap="goSeriesDetail">
					<view>所属系列<text>{{itemDetails.seriesName}}</text></view>
					<u-icon name="arrow-right" color="#414141" size="30upx"></u-icon>
				</view>
			</view>
			
			<view class="scrollIssuer">
				<view class="holder-info">
					<view class="contLeft">
						<image class="img" :src="itemDetails.issuerHead[0]" mode="scaleToFill"></image>
						<view class="desc">
							<view class="desc_1">{{itemDetails.metafile.arist || "----"}}<text>IP持有方</text></view>
							<!-- <view class="desc_2">{{itemDetails.metafile.publishNo}}</view> -->
						</view>
					</view>
					<!-- <u-icon name="arrow-right" color="#414141" size="30upx"></u-icon> -->
				</view>
				<view class="holder-info dfs">
					<view class="contLeft">
						<image class="img" :src="itemDetails.issuerHead[0]" mode="scaleToFill"></image>
						<view class="desc">
							<view class="desc_1">{{itemDetails.metafile.publisher || "----"}}<text>发行方</text></view>
							<view class="desc_2">{{itemDetails.accountAddress}}</view>
						</view>
					</view>
					<u-icon name="arrow-right" color="#414141" size="30upx"></u-icon>
				</view>
			</view>
			
			<view class="privilegeBox">
				<view class="titles">持有特权</view>
				<view class="contents">
					<view class="privilege" @tap="goApplet(0)">
						<image src="../../static/detail/image1.png" mode="widthFix"></image>
						<view>IP文库</view>
					</view>
					<view class="privilege" @tap="goApplet(1)">
						<image src="../../static/detail/image2.png" mode="widthFix"></image>
						<view>文创产品</view>
					</view>
					<view class="privilege" @tap="goApplet(3)">
						<image src="../../static/detail/image3.png" mode="widthFix"></image>
						<view>其他特权</view>
					</view>
				</view>
			</view>
			
			<view class="image-desc">
				<view class="title">
					<text>产品详情</text>
				</view>
				<view class="show-image">
					<image v-for="(item,index) in itemDetails.describeFileList" :key="index" mode="widthFix" class="img"
						:src="pathImg + item"></image>
				</view>
			</view>
			
			<view class="image-desc instructions">
				<view class="title" style="padding-bottom: 0;">
					<text>产品保障</text>
				</view>
				<view class="container">
					<view class="name">官方授权</view>
					<view class="contTxt">中天富数字资产运营平台是经四川省人民政府批准设立，国务院部 际联席会议验收通过的四川省唯一一家综合性文化产权转让服 务机构。成都文</view>
				</view>
				<view class="container">
					<view class="name">版权介绍</view>
					<view class="contTxt">中天富数字资产运营平台是经四川省人民政府批准设立，国务院部 际联席会议验收通过的四川省唯一一家综合性文化产权转让服 务机构。成都文</view>
				</view>
				<view class="container">
					<view class="name">区块链</view>
					<view class="contTxt">中天富数字资产运营平台是经四川省人民政府批准设立，国务院部 际联席会议验收通过的四川省唯一一家综合性文化产权转让服 务机构。成都文</view>
				</view>
				<view class="container">
					<view class="name">限量发行</view>
					<view class="contTxt">中天富数字资产运营平台是经四川省人民政府批准设立，国务院部 际联席会议验收通过的四川省唯一一家综合性文化产权转让服 务机构。成都文</view>
				</view>
			</view>
			
			<view class="image-desc instructions">
				<view class="title">
					<text>购买须知</text>
				</view>
				<view class="instructions" v-html="instructions.content"></view>
			</view>
		</view>
		
		<view class="operating">
			<view class="footBox">
				<view class="priceCont" v-if="itemDetails.bsType == 0">
					<view class="price">
						<text>￥</text>
						{{itemDetails.price || 0}}
					</view>
					<view class="numb">
						剩余{{(itemDetails.castingAmount - itemDetails.quantitySold) || 0}}份
					</view>
				</view>
				<view class="priceCont" v-else>
					<view class="numb" style="font-size: 30upx;padding-top:0">
						剩余{{(itemDetails.castingAmount - itemDetails.quantitySold) || 0}}份
					</view>
				</view>
				<view class="buttS">
					<view class="shopping0" v-if="itemDetails.status == 1">
						<view v-if="itemDetails.bsType == 0" @tap="toShopping('qg')">
							立即抢购
						</view>
						<view v-else @tap="toShopping('kt')">
							立即领取空投
						</view>
					</view>
					<view class="shopping2"  v-if="itemDetails.status == 2">
						<view class="bt">即将发售</view>
						<u-count-down :time="itemDetails.startTime" format="HH:mm:ss" @finish="endTimer()"></u-count-down>
					</view>
					<view class="shopping1"  v-if="itemDetails.status == 3">已售罄</view>
				</view>
			</view>
			<!-- bsType 0 发售； 1，空投 -->
			<!-- status 1 在售； 2，预售 ；3，结束-->
		</view>
		
		<u-popup :show="model3dShow" @close="model3dShow = false;move()" bgColor="transparent" mode="center" round="20upx">
			<view class="model3dPopup">
				<iframe class="iframeBox" :src="`/hybrid/html/3d.html?modelUrl=${itemDetails.coverImg}`"></iframe>
			</view>
		</u-popup>
		
		<u-popup :show="show" bg-color="#141414" mode="bottom">
			<view class="payPasTitle" v-if="showType == 2">
				<text>转让密码</text>
				<u-icon name="close" class="closeIcon" color="#999" @tap="guanbi" size="34upx"></u-icon>
			</view>
			<view class="modeTitle" v-else>
				<text>购买确认</text>
				<u-icon name="close" color="#fff" @tap="guanbi" size="34upx"></u-icon>
			</view>
			<view class="shop-tips" :style="{'min-height':showType==2?'620upx':'760upx'}">
				<view class="tip-image step1" v-if="showType == 0">
					<u-loading-icon inactive-color="red" size="80upx" color="#352070"></u-loading-icon>
					<text>转让请求中...</text>
					<text v-if="isKeepWaiting">{{copywriting}}</text>
				</view>
				
				<view class="tip-image step3" v-else-if="showType == 2">
					<view class="password">
						<view class="flex">
							<view class="password_num" v-for="(item,index) in miney_list">
								<view class="inputCont" v-if="item.id == index">
									<view v-for="(res,i) in payPas.payPsw.length" v-show="i == index">
										<view class="miney_data"></view>
									</view>
								</view>
							</view>
						</view>
						<input v-model="payPas.payPsw" :focus="payPas.setFocus" maxlength="6" type="number" value="123" @input="input_num">
					</view>
				</view>
				
				<view class="tip-image step2" v-else>
					<view class="tips">本商品一经售出，不支持退换，本产品源文件不支持本地下载。</view>
					<view class="goods">
						<image v-if="isImage(itemDetails.fileUrl)" :src="itemDetails.fileUrl"
							mode="scaleToFill" class="img"></image>
						<image v-else :src="itemDetails.fileUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"
							mode="scaleToFill" class="img"></image>
						<view class="info">
							<view class="name">{{itemDetails.metafile.name}}</view>
							<text>产品ID{{itemDetails.id}}</text>
						</view>
					</view>
					
					<view class="items">
						<text>接收地址</text>
						<view class="address">{{userData.blockchainAccount}}</view>
					</view>
					<view class="items" v-if="itemDetails.bsType == 0">
						<text>支付金额</text>
						<view class="price">￥{{moneyAll}}</view>
					</view>
					<view class="items">
						<text>钱包余额</text>
						<view class="myMoney">余额￥{{Number(userAccount.subAccountMoney).toFixed(2)}}</view>
					</view>
				</view>
				
				<view class="footBn" v-if="showType == 1">
					<view class="style1" v-if="(moneyAll)>Number(userAccount.subAccountMoney) && itemDetails.bsType == 0">余额不足，请先去充值</view>
					<view class="style2" @tap="payGoods" v-if="(moneyAll)<Number(userAccount.subAccountMoney) && itemDetails.bsType == 0">下一步输入转让密码</view>
					<view class="style2" @tap="payGoods" v-if="itemDetails.bsType == 1">立即领取</view>
				</view>
				
				<view class="footBn" v-else-if="showType == 401">
					<view class="style2" @tap="tocertification(1)">前往登录</view>
				</view>
				<view class="footBn" v-else-if="showType == 4">
					<view class="style2" @tap="tocertification(2)">立即实名认证</view>
				</view>
				<view class="footBn" v-else-if="showType == 801">
					<view class="style2" @tap="tocertification(3)">前往开户</view>
				</view>
				<view class="footBn" v-else-if="showType == 802">
					<view class="style2" @tap="tocertification(4)">绑定银行卡</view>
				</view>
				<view class="footBn" v-else-if="showType == 100">
					<view class="style2" @tap="tocertification(5)">设置支付密码</view>
				</view>
				<view class="footBn" v-else-if="showType == 3">
					<view class="style1">很抱歉您未获得此作品，请下次再试。</view>
				</view>
				<view class="footBn" v-else-if="showType == 5">
					<view class="style1">{{itemDetails.bsType == 0?'已售罄':'已抢完'}}</view>
				</view>
				<view class="footBn" v-else-if="showType == 6">
					<view class="style1">{{resMsg}}</view>
				</view>
				<view class="footBn" v-else-if="showType == 7">
					<view class="style1">已到达领取/购买上限</view>
				</view>
				<view class="footBn" v-else-if="showType == 8">
					<view class="style1">抱歉,未成年人暂时不能购买/领取数字版权作品</view>
				</view>
				<view class="footBn" v-else-if="showType == 2">
					<view :class="[payPas.payPsw.length==6?'style2':'style1']" @tap="payment">确认支付</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 二维码分享 -->
		<u-popup :show="show2" :customStyle="popupStyle" mode="center" @close="show2 = false">
			<view class="share-content">
				<view class="imgBlob" v-if="imgBlobData !== ''">
					<image :src="imgBlobData" mode="widthFix">
					</image>
					<text class="msg">长按保存到相册</text>
					<view class="guanbi" @tap="show2 = false;imgBlobData = ''"></view>
				</view>
				<view class="detailBox" id="share" v-show="imgBlobData == ''">
					<view class="cardBox">
						<image v-if="isImage(itemDetails.fileUrl)" :src="itemDetails.fileUrl"
							mode="scaleToFill" class="img"></image>
						<image v-else :src="itemDetails.fileUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"
							mode="scaleToFill" class="img"></image>
					</view>
					<view class="info-box">
						<view class="desc_1">
							<view class="desc_1_1">
								<text>{{itemDetails.metafile.name}}</text>
							</view>
							<view class="desc_1_2">限量&nbsp;|&nbsp;{{itemDetails.quotaNumber?itemDetails.quotaNumber:"1"}}份</view>
						</view>
						<view class="desc_3">
							<view class="desc_3_2">
								<view class="headList">
									<image class="headItem" :src="itemDetails.issuerHead[0]" mode="scaleToFill"></image>
									<text>{{itemDetails.issuerName[0]}}</text>
								</view>
								
								<view class="source">￥<text>{{itemDetails.price || 0}}</text></view>
							</view>
						</view>
						<view class="desc_4">
							<view class="logo">
								<image src="@/static/login/logo.png" mode="heightFix" class="img"></image>
								<text>数字文化产品转让平台</text>
							</view>
							<view class="desc_4_2">
								<view class="desc_4_2_1" ref='desc_4_2_1'>
									<canvas id="qrcode" canvas-id="qrcode" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="save-share" v-show="imgBlobData == ''">
				<view class="shareTypeTitle">分享到</view>
				<view class="shareType">
					<view @tap="shareType(1)">
						<image src="@/static/detail/share1.png" mode="heightFix"></image>
						<view>复制链接</view>
					</view>
					<view @tap="shareType(2)">
						<image src="@/static/detail/share2.png" mode="heightFix"></image>
						<view>保存图片</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 画布 -->
		<view class="hideCanvasView">
			<canvas class="hideCanvas" id="default_PosterCanvasId" canvas-id="default_PosterCanvasId"
				:style="[isStyle('hideCanvas')]"></canvas>
		</view>
		<view class="foot">— 已经到底啦！ —</view>
		<mix-loading ref="min_loading"></mix-loading>
		<u-toast ref="uToast"></u-toast>
		
		<view class="toastBox" v-show="errMsgShow">{{errMsg}}</view>
	</view>
</template>

<script>
	import {
		submitOrder,
		joinAirdrop,
		getSeriesCollInfo,getByOrderNo,
		getIsCreateOrder,getWeixinConfig,orderPay
	} from '@/api/home.js'
	import html2canvas from "html2canvas";
	import uQRCode from '@/common/uqrcode.js'
	import {nftuserlike,getNewsPageDetails,getAccountData} from '@/api/user.js'
	import { mapState ,mapMutations} from 'vuex';
	import wx from 'jweixin-module'; 
	import sha1 from '@/common/sha1.js'; 
	export default {
		data() {
			return {
				model3dShow:false,
				miney_list: [
					{id: 0,name: ''},
					{id: 1,name: ''},
					{id: 2,name: ''},
					{id: 3,name: ''},
					{id: 4,name: ''},
					{id: 5,name: ''},
				],
					
				moneyAll:0,
				userAccount:{},
				errMsg:"",
				errMsgShow:false,
				errMsgTime:null,
				payPas:{
					orderId:"",
					type:3,
					payPsw:"",
					setFocus:false,
				},
				instructions:{},
				show: false,
				show2: false,
				isEnd: false,
				showType: 1,
				itemDetails: {
					labelList:[],
					issuerHead:[],
					issuerName:[],
					metafile:{}
				},
				percentage: {
					num: 0,
					percent: 100
				},
				background: '',
				resMsg: '',
				isKeepWaiting: false,
				timerList: {
					time: null,
					timer: null,
					timers: null,
				},
				copywriting: '目前抢购人数太多，请耐心等待。',
				copywritingList: [
					'用小鞭子抽共识算法中',
					'恶意节点弃暗投明中',
					'处理哈希算法与共识算法早恋问题中',
					'摔打智能合约中',
					'共识算法尝试突破光速',
					'共识节点线上会议决策中',
					'尝试突破共识算法',
					'智能合约正在拒绝二义性解释',
					'共识节点正在自我修复',
					'已极速发射抢购信号',
					'智能合约高效执行中',
					'安全地搬运转让数据中',
					'数据处理速度已经飙到极限了',
					'转让签名的艺术价值鉴定中',
					'正在吸引更多洞藏家进入',
					'元宇宙基础架构建设中',
					'正在尝试破解哈希谜题',
					'智能合约自我学习成长中',
					'正在将更多创意融入区块中',
					'智能合约寻找创作灵感中',
				],
				rgb: '255,255,255,.15',
				imgBlobData: '',
				popupStyle: {
					height: "1216upx",
					width: "670upx",
					background: "rgba(0,0,0, 0)"
				},
				avatarUrl: '',
				nickName: '',
				serial: null,
				pathTxt:"",
				goodsId:"",
				isCollection:false,
				goAppletUrl:null,
				isWxOpen:false,
			};
		},
		onLoad(options) {
			this.$nextTick(()=>{
				this.$refs.min_loading.open('加载中，请稍后！');
			});
			this.getDetail(options.id);
			this.getInstructions();
			this.getConfig();
		},
		onShow(){
			this.getAccount();
		},
		computed:{
			...mapState(["hasLogin","uerInfo","h5Data"]),
			userData(){
			  let data = {};
			  if(this.$store.state.hasLogin && this.$store.state.uerInfo){
				data = this.$store.state.uerInfo;
				data["avatarUrl"] = data.headPortraitUrl?this.pathImg+data.headPortraitUrl:require("../../static/detail/avatar.png");
				data["name"] = data.nickname?data.nickname:"第"+data.id+"位数字藏家";
				this.avatarUrl = data.avatarUrl;
				this.nickName = data.name;
			  }
			  return data;
			},
		},
		methods: {
			//禁止页面滑动
			stop(){
				  var box=function(e)
				  {passive: false ;};
				  document.body.style.overflow='hidden';
				  document.addEventListener("touchmove",box,false);
			},
			 //允许页面滑动
			move(){
				var box=function(e){passive: false };
				document.body.style.overflow='';//出现滚动条
				document.removeEventListener("touchmove",box,false);
			},
			input_num() {
				const that = this;
				that.miney_list.forEach((item, index) => {
					for (var i = 0; i < that.payPas.payPsw.length; i++) {
						if (i == index) {
							that.miney_list[index].name = '*';
						}
					}
				})
			},
			
			errMsgHide(){
				clearTimeout(this.errMsgTime);
				this.errMsgTime = setTimeout(()=>{
					this.errMsgShow = false;
				},2000);
			},
			getAccount(){//账户余额
				getAccountData({}).then(res => {
					if (res.data.success) {
						let data = res.data.obj;
						this.userAccount = data;
					} else {
						// this.$u.toast(res.data.msg);
					}
				}).catch(err => {
					this.$u.toast('网络错误');
				});
			},
			setImgShow(cur){///判断文件类型
				if(cur.metafile.FileType){
					if(cur.metafile.FileType == ".glb"){
						return 3;
					}else if(cur.metafile.FileType == ".mp4"){
						return 2;
					}else{
						return 1;
					}
				}
				return 0;
			},
			endTimer(){
				// <!-- status 1 在售； 2，预售 ；3，结束-->
				if(this.itemDetails.status == 2){
					this.itemDetails.status = 1;
				}
			},
			// wx api 注册
			getConfig() {
				var ua = window.navigator.userAgent.toLowerCase();
				getWeixinConfig({}).then(res => {
					if (res.data.success) {
						let configData = res.data.obj;
						this.goAppletUrl = configData.split(',')[2];
						if (ua.match(/MicroMessenger/i) == 'micromessenger') { // 微信中打开
							this.isWxOpen = true;
							this.$nextTick(() => {
								let timestamp = new Date().getTime(),
									webUrl = location.origin;
								let signature = `jsapi_ticket=${configData.split(',')[1]}&noncestr=cdwjsszcpjypth5noncestr&timestamp=${timestamp}&url=${webUrl}`;
								
								wx.config({
									debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									appId: "wx6320d1a81129e420", // 必填，公众号的唯一标识，填自己的！
									timestamp:timestamp, // 必填，生成签名的时间戳
									nonceStr: "cdwjsszcpjypth5noncestr", // 必填，生成签名的随机串
									signature:sha1(signature), // 必填，签名
									jsApiList: ['wx-open-launch-weapp'],
									// ,'showMenuItems','scanQRCode','openEnterpriseChat', 'openEnterpriseContact'
									openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填
								});
								
								wx.ready(res => {
									let btn = document.getElementById('launch-btn');
									btn.addEventListener('launch', e => {
										console.log('success');
									});
									btn.addEventListener('error', e => {
										alert('小程序打开失败');
										console.log('fail', e.detail);
									});
								});
								
								wx.error(error => {
									console.log(error);
								});
							});
						} else { // 普通浏览器中打开
							this.isWxOpen = false;
						}
					}else{
						
					}
				}).catch(err=>{});
			},
			goApplet(i){
				if(this.itemDetails.isSee == 0){
					this.$u.toast("购买后方可查看！");
					return;
				}
				if(i == 0){
					location.href = this.goAppletUrl;
				}else{
					this.$u.toast("开发中，敬请期待！");
					return;
				}
			},
			getInstructions(){//购买须知
				getNewsPageDetails({categoryId:53}).then(res => {
					if (res.data.success) {
						this.instructions = res.data.obj;
					}
				});
			},
			getDetail(id){
				getSeriesCollInfo({id}).then(res => {
					if(res.data.success){
						let obj = res.data.obj;
						this.goodsId = obj.id;
						if (obj.bsType == 1) {
							this.copywriting = '目前领取人数太多，请耐心等待。'
						}
						if(obj.describeFile){
							obj.describeFileList = obj.describeFile.split(',');
						}
						if(obj.metafile){
							obj.metafile = JSON.parse(obj.metafile);
						}
						if(obj.fileUrl){
							obj.fileUrl = this.pathImg + obj.fileUrl;
						}
						if(obj.coverImg){
							obj.coverImg = this.pathImg + obj.coverImg;
						}
						
						if(obj.issuerHead){
							obj.issuerHead = ((obj.issuerHead).split(',')).map(item => {
								item = this.pathImg + item;
								return item;
							});
						}
						if(obj.issuerName){
							obj.issuerName = ((obj.issuerName).split(',')).map(item => {
								item = item;
								return item;
							});
						}
						if(obj.label){
							if(obj.label.indexOf(",") != -1){
								obj["labelList"] = obj.label.split(',');
							}else{
								let labelList = obj.label.split('#');
								labelList = labelList.map(im=>{
									im = ("#" + im);
									return im;
								});
								obj["labelList"] = labelList.filter((im,i)=>{
									return i>0;
								});
							}
						}
						if(obj.startTime){
							obj.startTime = this.moment(obj.startTime).diff(new Date().getTime());
						}
						this.isCollection = obj.isLike == 1?true:false;
						this.itemDetails = obj;
						this.moneyAll = obj.price;
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			collectionChange(i){
				// 1发售2抢购3转售4用户
				nftuserlike({id:this.goodsId,type:1}).then(res => {
					if (res.data.success) {
						this.isCollection = !this.isCollection;
						this.$u.toast(i==1?'收藏成功':"已取消");
					}else{
						
					}
				}).catch(err=>{});
			},
			isStyle(data, izSellOut) {
				if (data == 'con-box') {
					return {
						'backgroundColor': this.background
					}
				}else if (data == 'color-line') {
					return {
						'width': this.percentage.percent + '%'
					}
				} else if (data == 'btn') {
					if (izSellOut == 4) {
						return {
							'width': '100%'
						}
					} else {
						return {
							'width': '80%'
						}
					}
				}
			},
			goSeriesDetail() {
				uni.navigateTo({
					url: '/pages/detail/seriesDetail?id=' + this.itemDetails.seriesId+"&type=1"
				});
			},
			shareType(i){
				if(i == 1){
					let urls = location.href;
					uni.setClipboardData({
					 	data: urls,
					    success: ()=> {
							this.show2 = false;
					    }
					});
				}else{
					this.goPoster();
				}
			},
			// 生成图片
			async goPoster() {
				this.$refs.min_loading.open("图片生成中...");
				this.download();
			},
			async download() {
				const convertToImage = (container, options = {}) => {
					// 设置放大倍数
					const scale = window.devicePixelRatio;
					// 传入节点原始宽高
					const _width = container.offsetWidth;
					const _height = container.offsetHeight;
					// html2canvas配置项
					const ops = {
						width: _width - 2,
						height: _height - 2,
						useCORS: true,
						x: 1,
						y: 1,
						// allowTaint: false,
						dpi: 300,
						scale
						//   ...options,
					};
					return html2canvas(container, ops).then((canvas) => {
						// 返回图片的二进制数据
						return canvas.toDataURL("image/png");
					});
				};
				const imgBlobData = await convertToImage(document.querySelector('#share'));
				this.imgBlobData = imgBlobData;
				// setTimeout(()=>{
				this.$refs.min_loading.close();
				// },2000);
			},
			// 判断藏品是否是图片
			isImage(url) {
				if (url) {
					let filePath = url.toLocaleLowerCase();
					if (filePath.indexOf(".mp4") != -1) {
						return false;
					} else {
						return true;
					}
				} else {
					return
				}
			},
			toShopping(type) {//抢购//领取按钮
				this.show = true;
				this.showType = 1;
				if(!this.$store.state.hasLogin){
					this.showType = 401;
					this.errMsg = "请先前往登录！";
					this.errMsgShow = true;
					this.errMsgHide();
					return;
				}
				if (this.userData.isRealName !== 1) {
					this.showType = 4;
					this.errMsg = "请先实名认证！";
					this.errMsgShow = true;
					this.errMsgHide();
					return;
				}
				if (!this.userAccount.payPsw && this.itemDetails.bsType == 0) {
					this.showType = 100;
					this.errMsg = "请先设置支付密码！";
					this.errMsgShow = true;
					this.errMsgHide();
					return;
				}
			},
			payGoods(){//下一步 ///立即领取
				if(this.showType != 1) return;
				this.showType = 0;
				let index = 0;
				this.timerList.time = setTimeout(() => {
					this.isKeepWaiting = true;
					let index = 0;
					this.timerList.timer = setInterval(() => {
						this.copywriting = this.copywritingList[index];
						if(index >= (this.copywritingList.length-1)){
							index = 0;
						}else{
							index += 1;
						}
					}, 3000);
					clearTimeout(this.timerList.time);
				}, 60000);
				if (this.itemDetails.bsType == 1) {//空投
					joinAirdrop({
						castingId: this.itemDetails.id
					}).then(res => {
						if (res.data.success) {
							this.timerList.timers = setInterval(() => {
								this.loot(res.data.obj, 'kt');
							}, 10000)
							setTimeout(() => {
								this.loot(res.data.obj, 'kt');
							}, 3000)
						} else {
							clearInterval(this.timerList.timer);
							clearTimeout(this.timerList.time);
							this.timerList.time = null;
							this.timerList.timer = null;
							if (res.data.code == 1) {
								this.showType = 4;
							} else if (res.data.code == 2) {
								this.showType = 5;
							} else if (res.data.code == 4) {
								this.showType = 7;
							} else if (res.data.code == 5) {
								this.showType = 8;
							} else {
								this.resMsg = res.data.msg;
								this.showType = 6;
								setTimeout(()=>{
									this.showType = 1;
								},2000);
							}
						}
					}).catch(err=>{
						clearInterval(this.timerList.timer);
						clearTimeout(this.timerList.time);
						this.timerList.time = null;
						this.timerList.timer = null;
						this.showType = 6;
						this.resMsg = "网络异常，请稍后重试！";
						this.errMsg = "网络异常，请稍后重试！";
						this.errMsgShow = true;
						this.errMsgHide();
						setTimeout(()=>{
							this.showType = 1;
						},2000);
					});
				} else if (this.itemDetails.bsType == 0) {//抢购
					submitOrder({
						castingId: this.itemDetails.id,
						num:1,
					}).then(res => {
						if (res.data.success) {
							this.timerList.timers = setInterval(() => {
								this.loot(res.data.obj, 'pay');
							}, 10000)
							setTimeout(() => {
								this.loot(res.data.obj, 'pay');
							}, 3000);
						} else {
							clearInterval(this.timerList.timer);
							clearTimeout(this.timerList.time);
							this.timerList.time = null;
							this.timerList.timer = null;
							if (res.data.code == 1) {
								this.showType = 4;
							} else if (res.data.code == 2) {
								this.showType = 5;
							} else if (res.data.code == 4) {
								this.showType = 7;
							} else if (res.data.code == 5) {
								this.showType = 8;
							} else if (res.data.code == 801) {
								this.showType = 801;
								this.resMsg = res.data.msg;
							} else if (res.data.code == 802) {
								this.showType = 802;
								this.resMsg = res.data.msg;
							} else {
								this.resMsg = res.data.msg;
								this.showType = 6;
								setTimeout(()=>{
									this.showType = 1;
								},2000);
							}
						}
					}).catch(err=>{
						clearInterval(this.timerList.timer);
						clearTimeout(this.timerList.time);
						this.timerList.time = null;
						this.timerList.timer = null;
						this.showType = 6;
						this.resMsg = "网络异常，请稍后重试！";
						this.errMsg = "网络异常，请稍后重试！";
						this.errMsgShow = true;
						this.errMsgHide();
						setTimeout(()=>{
							this.showType = 1;
						},2000);
					});
				}
			},
			
			// 查询抢购是否成功
			loot(orderNo, type) {
				getIsCreateOrder({
					orderNo
				}).then(res => {
					if (res.data.code == 1) {
						// 成功
						clearInterval(this.timerList.timers);
						clearInterval(this.timerList.timer);
						clearTimeout(this.timerList.time);
						this.timerList.time = null;
						this.timerList.timer = null;
						this.timerList.timers = null;
						if (type == 'kt') {
							this.show = false;
							this.$refs.uToast.show({
								type: 'success',
								message: "领取成功",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							});
							setTimeout(() => {
								uni.redirectTo({
									url:"/pages/user/myGoodsList"
								});
							},1500);
						} else {
							this.getByOrderNos(orderNo);//获取订单详情
							
						}
					} else if (res.data.code == 3) {
						// 失败
						clearInterval(this.timerList.timers);
						clearInterval(this.timerList.timer);
						clearTimeout(this.timerList.time);
						this.timerList.time = null;
						this.timerList.timer = null;
						this.timerList.timers = null;
						this.showType = 3;
					} else if (res.data.code == 2) {
						// 继续等待
					}else{
						clearInterval(this.timerList.timers);
						clearInterval(this.timerList.timer);
						clearTimeout(this.timerList.time);
						this.timerList.time = null;
						this.timerList.timer = null;
						this.timerList.timers = null;
						this.showType = 6;
						this.resMsg = res.data.msg;
						this.errMsg = res.data.msg;
						this.errMsgShow = true;
						this.errMsgHide();
						setTimeout(()=>{
							this.showType = 1;
						},2000);
					}
				}).catch(err => {
					clearInterval(this.timerList.timers);
					clearInterval(this.timerList.timer);
					clearTimeout(this.timerList.time);
					this.timerList.time = null;
					this.timerList.timer = null;
					this.timerList.timers = null;
					this.showType = 6;
					this.resMsg = "网络异常，请稍后重试！";
					this.errMsg = "网络异常，请稍后重试！";
					this.errMsgShow = true;
					this.errMsgHide();
					setTimeout(()=>{
						this.showType = 1;
					},2000);
				});
			},
			getByOrderNos(orderNo) {
				getByOrderNo({
					orderNo
				}).then(res => {
					if (res.data.success) {
						this.payPas.orderId = res.data.obj.id;
						let data = res.data.obj;
						this.showType = 2;
						this.payPas.payPsw = "";
						this.payPas.setFocus = true;
						if (data.status == 1) {
							this.show = false;
							this.$refs.uToast.show({
								type: 'success',
								message: "抢购成功",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							});
							setTimeout(() => {
								uni.redirectTo({
									url:"/pages/user/myGoodsList"
								});
							},1500);
						}
					}else{
						this.showType = 6;
						this.resMsg = res.data.msg;
						
						this.errMsg = res.data.msg;
						this.errMsgShow = true;
						this.errMsgHide();
						setTimeout(()=>{
							this.showType = 1;
						},2000);
					}
				}).catch(err => {
					this.showType = 6;
					this.resMsg = "网络异常，请稍后重试！";
					this.errMsg = "网络异常，请稍后重试！";
					this.errMsgShow = true;
					this.errMsgHide();
					setTimeout(()=>{
						this.showType = 1;
					},2000);
				});
			},
			payment(){
				if(this.payPas.payPsw.length < 6) {
					this.errMsg = "请输入正确的转让密码！";
					this.errMsgShow = true;
					this.errMsgHide();
					return;
				};
				let pas = this.hrymd5.md5(this.payPas.payPsw);
				
				orderPay({
					orderId:this.payPas.orderId,
					type:this.payPas.type,
					payPsw:pas,
				}).then(res => {
					if (res.data.success) {
						this.show = false;
						this.$refs.uToast.show({
							type: 'success',
							message: "抢购成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						});
						setTimeout(() => {
							uni.redirectTo({
								url:"/pages/detail/payment"
							});
						},1500);
					}else {
						this.errMsg = res.data.msg;
						this.errMsgShow = true;
						this.errMsgHide();
					}
				}).catch(err => {
					this.errMsg = "网络异常，请稍后重试！";
					this.errMsgShow = true;
					this.errMsgHide();
				});
			},
			tocertification(i) {// 跳转页面
				if(i == 1){
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}else if(i == 2){
					uni.navigateTo({
						url: '/pages/openAccount/openAccountAgreement?phone=' + this.userData.mobile
					});
				}else if(i == 3){
					uni.navigateTo({
						url: "/pages/setting/openAccount"
					});
				}else if(i == 4){
					uni.navigateTo({
						url: "/pages/setting/userBank"
					});
				}else if(i == 5){
					uni.navigateTo({
						url: "/pages/setting/payPassword"
					});
				}
				this.show = false;
			},
			back() {
				clearInterval(this.timerList.timers);
				clearInterval(this.timerList.timer);
				clearTimeout(this.timerList.time);
				this.timerList.time = null;
				this.timerList.timer = null;
				this.timerList.timers = null;
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    if(this.setImgShow(this.itemDetails) == 3){
						uni.switchTab({
							url:("/"+canNavBack[0].route)
						});
					}else{
						uni.navigateBack({
							delta: 1,
						});
					}
				} else {  
				    history.back();  
				}
			},
			guanbi() {//关闭弹窗
				this.show = false;
				this.showType = 1;
				this.payPas.setFocus = false;
				this.isKeepWaiting = false;
				clearInterval(this.timerList.timers);
				clearInterval(this.timerList.timer);
				clearTimeout(this.timerList.time);
				this.timerList.time = null;
				this.timerList.timer = null;
				this.timerList.timers = null;
			},
			// 到达底部
			scrolltolower() {
				this.isEnd = true;
			},
			async shareFx() {//生成分享二维码
				this.show2 = true;
				let urls = location.href;
				setTimeout(() => {
					let modules = uQRCode.getModules({
						text: urls,
						errorCorrectLevel: uQRCode.errorCorrectLevel.L
					})
					let tileSize = 2.2
					// 获取绘图所需的上下文
					let ctx = uni.createCanvasContext('qrcode', this)
					// 开始绘制
					ctx.setFillStyle('#FFFFFF')
					ctx.fillRect(0, 0, 67, 67);
					for (var row = 0; row < modules.length; row++) {
						for (var col = 0; col < modules.length; col++) {
							// 计算每一个小块的位置
							var x = col * tileSize
							var y = row * tileSize
							var w = tileSize
							var h = tileSize

							var style = modules[row][col] ? '#000000' : '#FFFFFF'
							ctx.setFillStyle(style)
							ctx.fillRect(x, y, w, h)
						}
					}
					ctx.draw()
					// setTimeout(() => {
					// 	this.share();
					// }, 500)
					return;
				}, 200)
			}
		},
		onUnload() {
			this.move();
			clearInterval(this.timerList.timers);
			clearInterval(this.timerList.timer);
			clearTimeout(this.timerList.time);
			this.timerList.time = null;
			this.timerList.timer = null;
			this.timerList.timers = null;
		}
	}
</script>

<style lang="scss" scoped>
	.con-box {
		height: auto;
		padding-top: 120upx;
		padding-bottom: 40upx;
		.model3dPopup{
			width: 96vw;
			height: 600upx;
			border-radius: 20upx;
			position: relative;
			overflow: hidden;
			.iframeBox{
				width: 100%;
				height: 100%;
				border-radius: 20upx;
				border: 0 none;
				background-color: transparent;
			}
		}
		.toastBox{
			position: fixed;
			top: 50%;
			left: 50%;
			z-index: 99999;
			width: auto;
			max-width: 600upx;
			font-size: 24upx;
			padding: 16upx 30upx;
			transform: translate(-50%,-50%);
			background-color: #000;
			border-radius: 10upx;
			color: #fff;
		}
		.foot{text-align: center;color: #999;}
		.hideCanvasView{position: absolute;bottom: 0;left: 0;z-index: -1;}
		
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
		.icon-right{
			padding-top: 30upx;
			padding-right: 10upx;
			.backImg-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				image {
					width: 34upx;
					height: 30upx;
				}
				.share {
					width: 38upx;
					height: 38upx;
					margin-left: 20upx;
				}
			}
		}

		.goods-image {
			width: 100%;
			position: relative;
			>view{
				width: 100%;
				height: 716upx;
				overflow: hidden;
				position: relative;
				.iframeBox{
					width: 100%;
					height: 100%;
					border: 0 none;
					background-color: transparent;
				}
				.model3d{
					position: absolute;
					bottom: 108upx;
					left: 50%;
					width: 100upx;
					margin-left: -50upx;
					z-index: 3;
				}
				.mask{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 2;
				}
			}
			.img {
				width: 100%;
				height: 100%;
				display: block;
			}

			.videoBox {
				width: 100%;
				display: block;
				height:716upx;
				max-height: 716upx;
				/deep/.uni-video-container{
					background-color: transparent;
				}
			}
		}

		.goods-desc {
			width: 100%;
			height: auto;
			padding-bottom: 60upx;
			margin-top: -80upx;
			position: relative;
			z-index: 2;
			.goods_details{
				text-align: center;
				position:relative;
				background-color: #fff;
				padding: 0 30upx;
				padding-bottom: 20upx;
				border-top-left-radius: 25upx;
				border-top-right-radius: 25upx;
				.itemCont{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-bottom: 20upx;
					font-size: 24upx;
					view{
						padding: 0 20upx;
						height: 38upx;
						line-height: 38upx;
						background: #EB5703;
						border-radius: 5upx;
						color: #fff;
						margin-right: 17upx;
						text{
							color: #414141;
						}
					}
				}
				.title{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding-top: 28upx;
					padding-bottom: 26upx;
					image{
						width: 24upx;
						margin-right: 15upx;
					}
					view{
						display: flex;
						align-items: center;
						justify-content: center;
						height: 100%;
						background: #e3e4e7;
						// color: #2E1A6B;
						color: #666;
						font-size: 24upx;
						text-align: center;
						line-height: 32upx;
						padding: 0 15upx;
						margin-right: 30upx;
						.text{
							background: #f3f1f1;
							color: #EB5703;
							display: inline-block;
							height: 100%;
							padding: 0 16upx;
							margin-left: 15upx;
						}
					}
					.num{padding-right: 0;}
				}
				.name{
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					width:100%;
					margin-bottom: 30upx;
					text{
						flex: 1%;
						display: inline-block;
						text-align: left;
						font-size: 30upx;
						color:#111;
						padding-right: 84upx;
					}
					view{
						image{
							width:26upx;
						}
					}
					
				}
			}
			.infoBox{
				margin-top: 15upx;
				background-color: #fff;
				padding:4upx 30upx;
				font-size: 24upx;
				>view{
					display: flex;
					justify-content: space-between;
					align-items: center;
					view{
						color: rgba($color: #414141, $alpha: 0.61);
						padding-top: 32upx;
						padding-bottom: 30upx;
						border-bottom: 1px solid #F7F7F7;
						text{
							color: #414141;
							margin-left: 38upx;
						}
					}
				}
				view:last-child{border: 0 none;}
			}
			.scrollIssuer {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-top: 15upx;
				background-color: #fff;
				padding:8upx 30upx;
				.holder-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					border-bottom: 1px solid #F7F7F7;
					padding-top: 26upx;
					padding-bottom: 16upx;
					.contLeft{
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}
					.img {
						border-radius: 50%;
						height: 40upx;
						width: 40upx;
						box-shadow: 0 0 6px 3px rgba(0,0,0,0.1);
					}
					.desc {
						padding-left:10upx;
						.desc_1 {
							font-family: PingFang SC;
							font-size: 24upx;
							color: #414141;
							text{
								font-size: 18upx;
								background-color: #2b267f;
								color: #fff;
								display: inline-block;
								padding: 0 12upx;
								line-height: 24upx;
								height: 24upx;
								text-align: center;
								border-radius: 20upx;
								margin-left: 17upx;
							}
						}
										
						.desc_2 {
							font-family: PingFang SC;
							font-size: 16upx;
							color: rgba($color: #414141, $alpha: 0.42);
							width: 100%;
						}
					}
				}
				.holder-info:last-child{
					border: 0 none;
				}
			}
			.privilegeBox{
				margin-top: 15upx;
				background-color: #fff;
				padding:0upx 30upx;
				padding-bottom: 40upx;
				.titles{
					font-size: 30upx;
					color: #111;
					font-weight: 800;
					padding-top: 32upx;
					padding-bottom: 36upx;
				}
				.contents{
					display: flex;
					align-items: center;
					justify-content:space-between;
					padding: 0 40upx;
					.privilege{
						text-align: center;
					}
				}
				image{
					width: 58upx;
				}
			}
			
			.image-desc {
				width: 100%;
				height: auto;
				background-color: #fff;
				padding-bottom: 42upx;
				margin-bottom:20upx;
				margin-top: 15upx;
				overflow: hidden;
				.container{
					padding:30upx 30upx;
					border-bottom: 1px solid #F7F7F7;
					.name{
						padding-left: 10upx;
						color: #414141;
						font-size: 28upx;
						position: relative;
					}
					.name::after{
						content: "";
						display: block;
						position: absolute;
						top: 50%;
						left: 0;
						width: 6upx;
						height: 6upx;
						margin-top: -3upx;
						background-color: #EB5703;
						border-radius: 50%;
					}
					.contTxt{
						padding: 0 10upx;
						padding-top: 12upx;
						text-align: justify;
						font-size: 24upx;
						color:rgba($color: #414141, $alpha:0.54);
					}
				}
				.container:last-child{
					border: 0 none;
					padding-bottom: 0;
				}
				.instructions{
					font-size: 24upx;
					padding:0upx 30upx;
					color:rgba($color: #414141, $alpha:0.54);
				}
				.title{
					font-size: 30upx;
					color: #111;
					font-weight: 800;
					padding:0upx 30upx;
					padding-top: 32upx;
					padding-bottom: 36upx;
				}
				.show-image {
					width: 100%;
					margin-bottom: 26upx;
					height: auto;
					padding:0upx 18upx;
					.img {
						width: 100%;
					}
				}
				.show-image:last-child{margin-bottom: 0;}
			}
		}

		.operating {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			height: 132upx;
			background-color: #EB5703;
			color: #fff;
			.footBox{
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 36upx;
				.shopping0{
					height: 62upx;
					border: 1px solid #FFFFFF;
					border-radius: 31upx;
					padding: 0 40upx;
					text-align: center;
					line-height: 62upx;
				}
				.shopping1{
					padding: 0 40upx;
					font-size: 29upx;
					height: 54upx;
					background: #B5B5B5;
					border-radius: 27upx;
					line-height: 54upx;
				}
				.shopping2{
					text-align: center;
					padding-top: 26upx;
					/deep/.u-count-down__text{
						color: #fff;
						font-size: 20upx;
					}
					.bt{
						padding: 0 40upx;
						font-size: 29upx;
						height: 54upx;
						background: #B5B5B5;
						border-radius: 27upx;
						line-height: 54upx;
					}
				}
				.priceCont{
					display: flex;
					align-items: center;
					.price{
						font-weight: 600;
						font-size:80upx;
						text{
							font-size: 44upx;
						}
					}
					.numb{
						padding-top: 40upx;
						font-size: 20upx;
						margin-left: 12upx;
					}
				}
			}
		}
		.modeTitle{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			padding: 0 30upx;
			color: #fff;
			height: 100upx;
			background-color: #2C1769;
		}
		.payPasTitle{
			font-size: 40upx;
			color: #2C1769;
			position: relative;
			background-color: #fff;
			.closeIcon{
				position: absolute;
				top: 30upx;
				right: 30upx;
			}
			text{
				padding-top: 30upx;
				font-weight: 800;
				display: block;
				text-align: center;
			}
		}
		.shop-tips {
			background-color: #fff;
			min-height:760upx;
			position: relative;
			.step1{
				padding-top: 170upx;
				text{
					display: block;
					margin-top: 30upx;
					color: #333;
					font-size: 30upx;
				}
			}
			.step2{
				padding: 0 30upx;
				.tips{
					font-size: 24upx;
					color: #666;
					line-height: 34upx;
					margin-top: 22upx;
					margin-bottom: 10upx;
				}
				.goods{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 26upx;
					.info{
						flex: 1%;
						text-align: left;
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;
						min-height: 160upx;
						padding: 10upx 0;
						padding-left: 20upx;
						.name{
							font-size: 34upx;
							color: #111;
							width: 100%;
						}
						text{
							font-size: 24upx;
							color: #666;
						}
					}
					image{
						width: 160upx;
						height: 160upx;
						border-radius: 10upx;
					}
				}
				.items{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 64upx;
					>text{
						font-size: 24upx;
						color: #333;
					}
					.address,.myMoney{
						color: #999;
						font-size: 24upx;
					}
					.price{
						font-size:30upx;
						color:#EB5703
					}
				}
			}
			.step3{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 50upx;
				margin-top: 100upx;
				
				.password {
					width: 100%;
					height: 100upx;
					position: relative;
					.flex{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.password_num {
							width: 100upx;
							height: 100upx;
							line-height: 100upx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color:#999;
							.inputCont{
								display: flex;
								align-items: center;
								.miney_data {
									width: 20upx;
									height: 20upx;
									background-color: #000000;
									border-radius: 50%;
								}
							}
							
						}
					}
				}
			
				.password input {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}
			
			.footBn{
				width: 100%;
				padding: 0 30upx;
				position: absolute;
				bottom: 40upx;
				left: 0;
				>view{
					font-size: 30upx;
					color: #fff;
					text-align: center;
					line-height: 80upx;
					height: 80upx;
				}
				.style1{
					background-color: #999;
				}
				.style2{
					background-color: #eb5703;
				}
			}
			.tip-image {
				width: 100%;
				text-align: center;
				image {
					width: 132upx;
					height: 132upx;
				}
			}
		}
	}

	.prize {
		width: 690upx;
		height: 680upx;
		position: relative;
		background: #484848;
		// #151515  设计稿颜色
		color: #FFFFFF;

		// border: 2upx solid #484848;
		// border-radius: 10upx;
		.prizeTitle {
			width: 100%;
			height: 88upx;
			font-size: 30upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98upx;
			text-align: center;
		}

		.prizeBox {
			margin: 30upx 0 22upx 0;

			.tabTitle {
				display: flex;
				justify-content: space-between;

				.prizeText {
					text-align: center;
					font-size: 24upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #ACACAC;
					line-height: 64upx;
				}

				.prizeText1 {
					width: 25%;
				}

				.prizeText2 {
					width: 25%;
				}

				.prizeText3 {
					width: 50%;
				}
			}

			.msg {
				width: 100%;
				text-align: center;
				color: rgba(255, 255, 255, .5);
				font-size: 24upx;
				margin-top: 30upx;
				padding-bottom: 20upx;
			}

			.prizeList {
				.prizeItem {
					display: flex;
					justify-content: space-between;

					.prizeText {
						text-align: center;
						font-size: 24upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #ACACAC;
						line-height: 64upx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}

				.prizeUser {
					width: 25%;
				}

				.prizeRecord {
					width: 25%;
				}

				.prizeTime {
					width: 50%;
				}
			}
		}
	}

	.guanbi {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 40upx;
		right: 40upx;
		background: url(../../static/user/guanbi.png) no-repeat center center;
		background-size: 100% 100%;
		z-index: 9999;
	}

	.share-content {
		width: 100%;
		position: relative;
		.imgBlob {
			position: relative;
			width: 100%;
			height: 100%;
			z-index: 99;
			border-radius: 40upx;
			.msg {
				font-size: 24upx;
				font-weight: 400;
				color: #ffffff;
				text-align: center;
				opacity: 0.7;
				// margin-top: 20upx;
				position: absolute;
				width: 100%;
				left: 0;
				bottom: -60upx;
			}
		
			image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 40upx;
			}
		
			.guanbi {
				width: 50upx;
				height: 50upx;
				position: absolute;
				top: 40upx;
				right: 40upx;
				background: url('https://hry-hyperchain-public.oss-cn-beijing.aliyuncs.com/file/hdStatic/user/guanbi.png') no-repeat center center;
				background-size: 100% 100%;
				z-index: 999;
			}
		}

		.detailBox {
			transition: all 0.3s;
			width: 100%;
			background-color:#fff;
			border-radius: 40upx;
			padding-bottom: 30upx;
			position: relative;
			z-index: 1;
			overflow: hidden;
			.cardBox {
				width: 100%;
				height: 560upx;
				margin-bottom:30upx;
				overflow: hidden;
				display: flex;
				align-items: center;
				border-top-left-radius: 40upx;
				border-top-right-radius: 40upx;
				image{
					display:block;
					width: 100%;
					height: 100%;
					margin: 0 auto;
				}
			}

			.info-box {
				width: 100%;
				padding: 0 30upx;
				.desc_1 {
					width: 100%;
					color: #333;
					.desc_1_1 {
						font-size: 30upx;
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}

					.desc_1_2 {
						margin-top: 20upx;
						display: inline-block;
						padding: 0 10upx;
						background: #3B3B3B;
						border-radius: 6upx;
						font-size: 20upx;
						height: 44upx;
						line-height: 44upx;
						color: #FBA05D;
					}
				}

				.desc_3 {
					.desc_3_2 {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 30upx;
						.headList {
							display: flex;
							align-items: center;
							.headItem {
								width: 40upx;
								height: 40upx;
								border-radius: 50%;
								overflow: hidden;
							}
							text{
								padding-left: 6upx;
								color: #666;
								font-size: 24upx;
							}
						}

						.source {
							margin-left: 10upx;
							color: #333;
							font-size: 24upx;
							text{
								font-size: 36upx;
							}
						}
					}
				}

				.desc_4 {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-top: 20upx;
					.logo{
						display: flex;
						justify-content: start;
						align-items: center;
						font-size: 26upx;
						.img{
							height: 40upx;
							margin-right: 10upx;
						}
					}
					
					.desc_4_2 {
						width: 180upx;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.desc_4_2_1 {
							width: 138upx;
							height: 138upx;
							margin: 0 auto;
							padding: 2upx;
							background-color: #fff;

							image {
								width: 100%;
								height: 100%;
							}

							#qrcode {
								width: 134upx;
								height: 134upx;
							}
						}
					}
				}
			}
		}
	}

	.fxImg {
		position: fixed;
		top: 0;
		right: 0;
		padding: 40upx;
		z-index: 99;

		image {
			width: 80upx;
			height: 80upx;
		}
	}

	.save-share {
		transition: all 0.3s;
		margin-top: 40upx;
		.shareTypeTitle{
			text-align: center;
			color: #fff;
			font-size: 32upx;
		}
		.shareType{
			display: flex;
			justify-content: center;
			justify-content: center;
			margin-top:40upx;
			>view{
				display: inline-block;
				text-align: center;
				margin: 0 40upx;
				image{
					height: 100upx;
				}
				view{
					line-height: 28upx;
					margin-top: 24upx;
					color: rgba(255,255,255,0.8);
					font-size: 28upx;
				}
			}
		}
	}
</style>